<template>
<i class="rl-icon" :style="iconStyle" v-bind="$attrs">
  <!-- 将父组件传递给 Icon 组件的所有 props 动态地传递给内部的 font-awesome-icon 组件 -->
  <font-awesome-icon v-bind="iconProps"></font-awesome-icon>
</i>
</template>

<script setup lang="ts">
// 引入FontAwesomeIcon 组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import {omit} from 'lodash-es'; 
import { computed } from 'vue';
// 引入组件接收的props
import type { IconProps } from './types';

defineOptions({
  name:'RlIcon',
  inheritAttrs: false
})
const props = defineProps<IconProps>()
// 过滤掉props中传递的color属性
//font-awesome-icon组件本身不接收这种类型的props, 因此我们要对传递的props进行过滤，我们可以使用lodash工具库完成这项功能。
const iconProps = computed(()=>{
  return omit(props,['color'])
})
// 根据是否传递color属性来决定 icon的颜色
const iconStyle = computed(()=>{
  const {color} = props
  if(!color) return {}
  return {
    '--color':color
  }

})
</script>

<style src="./style.css"></style>
<style scoped>

</style>